<template>
    <div>
        <div class="container1" style="margin-top:0.5rem;">
            <div class="common-title-flex">
                <div class="common-title-div"></div>
                <div class="common-title-text">风险评估条件</div>
            </div>
            <el-form ref="searchObj" :inline="true" :model="searchObj" label-width="80px" size="mini" style="margin-bottom:-10px;margin-top:10px;">
                    <el-form-item label="姓名">
                        <el-input v-model="searchObj.name" placeholder="请输入姓名" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="公司">
                        <el-input v-model="searchObj.company" placeholder="请输入公司" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="searchObj.phone" placeholder="请输入电话" clearable ></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left:2rem;">
                        <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
                        <el-button @click="reset" icon="el-icon-refresh">重置</el-button>
                    </el-form-item>
            </el-form>
        </div>
        <div class="container" style="margin-top:1rem;">
            <div class="common-list-class">
                <div style="display:flex;">
                    <el-radio-group v-model="radioStatus" @change="radioStatusChange">
                        <el-radio-button label="待评估"></el-radio-button>
                        <el-radio-button label="已评估"></el-radio-button>
                    </el-radio-group>
                </div>
                <div style="display:flex;">
                    <el-upload
                    class="upload-file"
                    :headers="uploadHeader"
                    :before-upload="beforeUpload"
                    :action="uploadUrl"
                    :on-success="uploadSucess"
                    :on-error="uploadError"
                    :on-progress="uploadProgress"
                    :show-file-list="false">
                        <el-button type="primary" icon="el-icon-download">批量导入</el-button>
                    </el-upload>
                    <el-button type="primary" style="height:32px;margin-left:10px;" icon="el-icon-upload2">批量导出</el-button>
                </div>
            </div>
            <!-- 查询列表 -->
            <el-table :data="tableData" size="mini" style="width: 100%;margin-top:10px;margin-bottom:10px;" @selection-change="handleSelectionChange" max-height="550" border>
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="phone" label="电话" width="100" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="companyName" label="公司名称"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="leader" label="劳务公司" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="leader" label="工作状态" width="100" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="confirmTime" label="备案时间" width="100" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="confirmTime" label="备案结果" width="100" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="300" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-view" @click="logoutClick(scope.row)">查看风险</el-button>
                        <el-button type="primary" size="mini" icon="el-icon-tickets" @click="detailsClick(scope.row)">详情</el-button>
                        <el-button type="success" size="mini" icon="el-icon-lx-apps" @click="integralClick(scope.row)">积分</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-row type="flex" justify="end">
                    <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                    </el-pagination>
            </el-row>
        </div>
        <!-- 新增警员 和修改警员-->
        <el-dialog :title="isEditTitle" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="newaddFlag" width="50%" :before-close="handleClose" center>
            <div slot="title" class="header-title">
                <div class="header-title-div"></div>
                <div class="header-title-text">{{isEditTitle}}</div>
            </div>
            <el-form ref="inputObj" :model="inputObj" label-width="100px" :rules="rules">
                    <el-form-item label="登录账号" prop="username">
                        <el-input v-model="inputObj.username" placeholder="请输入登录账号" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码" prop="userpwd">
                        <el-input v-model="inputObj.userpwd" placeholder="请输入登录密码" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="警员姓名" prop="name">
                        <el-input v-model="inputObj.name" placeholder="请输入警员姓名" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="警员警号" prop="code">
                        <el-input v-model="inputObj.code" placeholder="请输入警员警号" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone">
                        <el-input v-model="inputObj.phone" placeholder="请输入手机号码" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="所属责任区" prop="area">
                        <el-select v-model="inputObj.area" multiple placeholder="请选择所属责任区" style="width:100%;">
                            <el-option
                            v-for="item in selfAreaList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属部门" prop="apartment">
                        <el-select v-model="inputObj.apartment" placeholder="请选择所属部门" style="width:100%;">
                            <el-option
                            v-for="item in apartmentList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="当前岗位" prop="currentPosition">
                        <el-select v-model="inputObj.currentPosition" placeholder="请选择当前岗位" style="width:100%;">
                            <el-option
                            v-for="item in currentPositionList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="座机/分机" prop="telephone">
                        <el-input v-model="inputObj.telephone" placeholder="请输入座机/分机" clearable ></el-input>
                    </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submit">提 交</el-button>
                <el-button @click="cancel">取 消</el-button>
            </span>
        </el-dialog>
        <!-- 警员详情 -->
        <el-dialog title="劳务工详情" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="detailsFlag" width="60%" :before-close="detailsClose" center>
            <div slot="title" class="header-title">
                <div class="header-title-div"></div>
                <div class="header-title-text">劳务工详情</div>
            </div>
            <div style="height:500px;overflow: auto;">
            <div class="basic_information_class">
                <div class="avator_class">
                    <el-row type="flex" justify="center" style="margin-top:1rem;">
                        <el-image :src="imageUrl" style="height:210px;" fit="fill"></el-image>
                    </el-row>
                </div>
                <div class="avator_right_class">
                    <el-row type="flex" justify="center" style="margin-top:1rem;">
                        <el-col :span="4" class="bold-class">姓名</el-col>
                        <el-col :span="5" class="grey-class">{{employeeInfo.name}}</el-col>
                        <el-col :span="4" class="bold-class">性别</el-col>
                        <el-col :span="4" class="grey-class">{{employeeDetails.sexDesc}}</el-col>
                        <el-col :span="4" class="bold-class">民族</el-col>
                        <el-col :span="4" class="grey-class">{{employeeDetails.nation}}</el-col>
                    </el-row>
                    <el-row type="flex" justify="center">
                        <el-col :span="4" class="bold-class">出生年月</el-col>
                        <el-col :span="5" class="grey-class">{{employeeDetails.birthday}}</el-col>
                        <el-col :span="4" class="bold-class">年龄</el-col>
                        <el-col :span="4" class="grey-class">{{employeeDetails.age}}</el-col>
                        <el-col :span="4" class="bold-class">婚姻状态</el-col>
                        <el-col :span="4" class="grey-class">{{employeeDetails.isMarryDesc}}</el-col>
                    </el-row>
                    <el-row type="flex" justify="center">
                        <el-col :span="4" class="bold-class">邮箱</el-col>
                        <el-col :span="5" class="grey-class">{{employeeDetails.email}}</el-col>
                        <el-col :span="4" class="bold-class">联系电话</el-col>
                        <el-col :span="12" class="grey-class">{{employeeInfo.phone}}</el-col>
                    </el-row>
                    <el-row type="flex" justify="center">
                        <el-col :span="4" class="bold-class">籍贯</el-col>
                        <el-col :span="5" class="grey-class">{{employeeDetails.nativePlace}}</el-col>
                        <el-col :span="4" class="bold-class">身份证号</el-col>
                        <el-col :span="12" class="grey-class">{{employeeInfo.identity}}</el-col>
                    </el-row>
                    <el-row type="flex" justify="center">
                        <el-col :span="4" class="bold-class">家庭住址</el-col>
                        <el-col :span="21" class="grey-class">{{employeeDetails.nativeAddr}}</el-col>
                    </el-row>
                    <el-row type="flex" justify="center">
                        <el-col :span="4" class="bold-class">现住地址</el-col>
                        <el-col :span="21" class="grey-class">{{employeeDetails.presentAddr}}</el-col>
                    </el-row>
                </div>
            </div>
             <el-divider>学历信息</el-divider>
             <el-table :data="educateList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;" max-height="550" border>
                <el-table-column prop="beginTime" label="入学日期" width="80"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="endTime" label="毕业日期" width="100" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="schoolName" label="毕业院校" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="major" label="专业" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="educationLevelDesc" label="学历" width="120" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="remark" label="备注" show-overflow-tooltip align="center">
                </el-table-column>
            </el-table>
             <el-divider>工作经历</el-divider>
             <el-table :data="workList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;" max-height="550" border>
                <el-table-column prop="beginTime" label="开始时间" width="80"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="endTime" label="结束时间" width="100" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="companyName" label="单位名称" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="position" label="岗位" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="leaveReason" label="辞职原因" width="120" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="hasCertifyDesc" label="是否有证明材料" show-overflow-tooltip align="center">
                </el-table-column>
            </el-table>
            <el-divider>家庭信息</el-divider>
             <el-table :data="familyList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;" max-height="550" border>
                <el-table-column prop="familyName" label="姓名" width="80"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="familyRelativeDesc" label="与本人关系" width="100" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="familyBirth" label="出生年月" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="componentName" label="工作单位" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="familyPosition" label="担任职务" width="120" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="familyPhone" label="联系电话" show-overflow-tooltip align="center">
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="center">
                <el-col :span="4" class="bold-class">在本公司有无熟人</el-col>
                <el-col :span="4" class="grey-class">{{employeeDetails.hasFriendDesc}}</el-col>
                <el-col :span="4" class="bold-class">姓名</el-col>
                <el-col :span="4" class="grey-class">{{employeeDetails.friendName}}</el-col>
                <el-col :span="4" class="bold-class">联系电话</el-col>
                <el-col :span="4" class="grey-class">{{employeeDetails.friendPhone}}</el-col>
            </el-row>
            <el-divider>紧急联系人</el-divider>
             <el-table :data="judgeList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%;margin-top:10px;" max-height="550" border>
                <el-table-column prop="familyName" label="姓名" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="familySexDesc" label="性别" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="familyRelativeDesc" label="与本人关系" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="familyPhone" label="联系方式" show-overflow-tooltip align="center">
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="center">
                <el-col :span="4" class="bold-class">是否住宿</el-col>
                <el-col :span="10" class="grey-class">{{employeeDetails.isDormDesc}}</el-col>
                <el-col :span="4" class="bold-class">招聘渠道</el-col>
                <el-col :span="10" class="grey-class">{{employeeDetails.recruitmentChannels}}</el-col>
            </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button  size="mini" @click="detailsClose">关 闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import mixin from '@/mixin/mixin.js'; 
    export default {
        name: 'laborer',
        mixins: [mixin],
        data(){
            return {
                imageUrl:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                radioStatus:'待评估',
                uploadHeader:{
                  token:'1244567788'  
                },
                uploadUrl:'https://jsonplaceholder.typicode.com/posts/',
                rules:{
                    username: [
                        { required: true, message: '请输入登录账号', trigger: 'blur' }
                    ],
                    userpwd: [
                        { required: true, message: '请输入登录密码', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入警员姓名', trigger: 'blur' }
                    ],
                    code: [
                        { required: true, message: '请输入警员警号', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入手机号码', trigger: 'blur' }
                    ],
                    area: [
                        { required: true, message: '请选择所属责任区', trigger: 'change' }
                    ],
                    apartment: [
                        { required: true, message: '请选择所属部门', trigger: 'change' }
                    ],
                    currentPosition:[
                        { required: true, message: '请选择当前岗位', trigger: 'change' }
                    ],
                },
                detailsObj:{
                    username:'12321123',
                    userpwd:'123',
                    name:'张三',
                    code:'123001',
                    phone:'1356454545',
                    apartment:'部门22',
                    currentPosition:'当前位置11',
                    telephone:'025-21321312'
                },
                inputObj:{
                    username:'',
                    userpwd:'',
                    name:'',
                    code:'',
                    phone:'',
                    area:[],
                    apartment:'',
                    currentPosition:'',
                    telephone:''
                },
                detailsFlag:false,
                isEditTitle:'',
                newaddFlag:false,
                pageSizes:[10, 15, 50, 100],
                pagesize:10,
                total:10,
                currentPage:1,
                tableData: [{
                    name: '张三',
                    companyName: '南京市新港公司',
                    leader:'领队人1',
                    confirmTime:'2020-12-20',
                    phone:'129320292',
                    riskAssessment:'危险',
                    address:'江苏省南京市江北新区大厂',
                    riskAssessmentType:'danger'
                    },{
                    name: '张三',
                    companyName: '南京市新港公司',
                    leader:'领队人1',
                    confirmTime:'2020-12-20',
                    phone:'129320292',
                    riskAssessment:'危险',
                    address:'江苏省南京市江北新区大厂',
                    riskAssessmentType:'danger'
                    },{
                    name: '张三',
                    companyName: '南京市新港公司',
                    leader:'领队人1',
                    confirmTime:'2020-12-20',
                    phone:'129320292',
                    riskAssessment:'危险',
                    address:'江苏省南京市江北新区大厂',
                    riskAssessmentType:'danger'
                    },{
                    name: '张三',
                    companyName: '南京市新港公司',
                    leader:'领队人1',
                    confirmTime:'2020-12-20',
                    phone:'129320292',
                    riskAssessment:'危险',
                    address:'江苏省南京市江北新区大厂',
                    riskAssessmentType:'danger'
                    },{
                    name: '张三',
                    companyName: '南京市新港公司',
                    leader:'领队人1',
                    confirmTime:'2020-12-20',
                    phone:'129320292',
                    riskAssessment:'危险',
                    address:'江苏省南京市江北新区大厂',
                    riskAssessmentType:'danger'
                    },{
                    name: '张三',
                    companyName: '南京市新港公司',
                    leader:'领队人1',
                    confirmTime:'2020-12-20',
                    phone:'129320292',
                    riskAssessment:'警告',
                    address:'江苏省南京市江北新区大厂',
                    riskAssessmentType:'warning'
                    },{
                    name: '张三',
                    companyName: '南京市新港公司',
                    leader:'领队人1',
                    confirmTime:'2020-12-20',
                    phone:'129320292',
                    riskAssessment:'一般',
                    address:'江苏省南京市江北新区大厂',
                    riskAssessmentType:''
                    },{
                    name: '张三',
                    companyName: '南京市新港公司',
                    leader:'领队人1',
                    confirmTime:'2020-12-20',
                    phone:'129320292',
                    riskAssessment:'良好',
                    address:'江苏省南京市江北新区大厂',
                    riskAssessmentType:'success'
                    }],
                searchObj:{
                    name:'',
                    company:'',
                    phone:''
                },
                selectList:[]
            }
        },
        created(){
            let data = [{
                    name:'小红',
                    number:1
                },{
                    name:'小红',
                    number:3
                },{
                    name:'小红',
                    number:4
                },{
                    name:'小红',
                    number:6
                },{
                    name:'小明',
                    number:1
                },{
                    name:'小明',
                    number:3
                },{
                    name:'小军',
                    number:4
                },{
                    name:'小军',
                    number:6
                }];
            let a = this.union(data);
            console.log(a);

        },
        methods: {
            union(arr) {
                arr = arr || []
                var tmp = {}
                for (var i = 0, len = arr.length; i < len; i++) {
                    var obj = arr[i]
                    if (obj.name in tmp) {
                    tmp[obj.name].number += obj.number
                    } else {
                    tmp[obj.name] = obj
                    }
                }
                var result = []
                for (var key in tmp) {
                    result.push(tmp[key])
                }
                return result
            },
            handleSelectionChange(value){
                this.selectList = value;
            },
            radioStatusChange(value){
                this.radioStatus = value;
            },
            beforeUpload(file){
                this.showLoading('导入中')
            },
            uploadProgress(event, file, fileList){
                this.videoUploadPercent = file.percentage.toFixed(0)+"%";
                console.log('event--------',event)
                console.log('file--------',file)
                console.log('fileList--------',fileList)
            },
            uploadSucess(response){
                this.$message({
                    message:'导入成功！',
                    type:'success'
                })
                this.hideLoading();
                console.log('response------',response)
            },
            uploadError(error){
                 this.$message({
                    message:'导入失败！',
                    type:'error'
                })
                this.hideLoading();
                console.log('error-----',error)
            },
            // 新建确认和修改确认
            submit(){
                // this.$axios({
                //     method: 'get',
                //     url: `${this.requestUrl}`,
                //     headers:{
                //         token:this.requestToken     
                //     },
                //     data: params,
                //     params: params
                // })
            },
            // 取消点击
            cancel(){
                this.newaddFlag = false;
                this.inputObj = {
                    username:'',
                    userpwd:'',
                    name:'',
                    code:'',
                    phone:'',
                    area:[],
                    apartment:'',
                    currentPosition:'',
                    telephone:''
                };
                this.$refs["inputObj"].resetFields();
            },
            // 取消点击
            handleClose(){
                this.cancel();
            },
            // 点击分页当前页多少数据
            handleSizeChange(val){
                this.pagesize = val;
            },
            // 点击分页页数
            handleCurrentChange(val){
                this.currentPage = val;
            },
            // 查询
            query() {
                console.log(this.searchObj);
            },
            //  重置
            reset(){
                this.searchObj={
                    name:'',
                    company:'',
                    phone:''
                }
            },
            // 注销
            logoutClick(){
                this.$confirm('请确认是否注销该劳务工?', '注销', {
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                }).then(() => {
                this.$message({
                    type: 'success',
                    message: '注销成功!'
                });
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消注销'
                });          
                });
            },
            // 详情
            detailsClick(row){
                this.detailsFlag = true;
            },
            // 详情关闭
            detailsClose(){
                this.detailsFlag = false;
            },
            // 修改
            editClick(){
                this.newaddFlag = true;
                this.isEditTitle = '修改警员';
                this.inputObj = {
                    username:'张三',
                    userpwd:'123',
                    name:'张警官',
                    code:'12322',
                    phone:'123456733',
                    area:['六合区','浦口区','建邺区'],
                    apartment:'请问我去',
                    currentPosition:'当前位置111',
                    telephone:'2132312'
                };
            }
        }
    }
</script>
<style scoped>
  .common-title-flex{
      display:flex;
  }
  .common-title-div{
      width:3px;
      height:16px;
      background-color:#368af7;
      margin-top:2px;
  }
  .common-title-text{
      margin-left:4px;
      font-size: 14px;
  }
  .common-list-class{
      display:flex;
      justify-content:space-between;
      margin-top:-10px;
  }
  .upload-file >>> .el-upload--text{
      border:none;
      width: 100px;
      height: 36px;
  }
</style>>